<template>
  <div
    class="menu"
    :class="{'menu--collapsed': menuCollapsed}"
  >
    <!-- 收缩Menu菜单 -->
    <div class="menu-shrink">
      <i
        @click="shrinkMenu"
        class="menu-shrink__icon iconfont icon-3"
      ></i>
    </div>

    <template v-for="(parent, index) of menuData">
      <!-- 标题 -->
      <div
        :key="'title_' + index"
        class="menu-title"
        @click="changeItem(index)"
        :class="parent.__Panel && 'menu-title--open'"
      >
        <i
          class="menu-title__icon menu-title__icon--left iconfont"
          :class="parent.leftIcon && `${parent.leftIcon}`"
        ></i>
        <span class="menu-title__text">{{parent.title}}</span>
        <i
          class="menu-title__icon menu-title__icon--right iconfont"
          :class="parent.rightIcon && `${parent.rightIcon}`"
        ></i>
      </div>
      <!-- 内容 -->
      <div
        :key="`item_${index}_${childIndex}`"
        v-show="parent.__Panel"
        @click="clickItem({index, childIndex})"
        class="menu-item"
        v-for="(child, childIndex) of parent.children"
        :class="{'active': child.__Active}"
      >{{child.title}}
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "Menu",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    active: {
      type: String,
      default: ""
    },
    collapsed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      menuData: this.data,
      menuActive: this.active,
      menuCollapsed: this.collapsed
    };
  },
  methods: {
    // 展开收起Menu
    shrinkMenu() {
      this.menuCollapsed = !this.menuCollapsed;
    },
    formatData() {
      // 添加展开收起的控制属性 __PANEL
      let active = this.menuActive.split("-");
      this.menuData.forEach((item, parentIndex) => {
        item.__Panel = active[0] === String(parentIndex);
        item.children.forEach((child, childIndex) => {
          child.__Active =
            active[0] === String(parentIndex) &&
            active[1] === String(childIndex);
        });
      });
      return this.menuData;
    },

    // 点击导航项
    changeItem(index) {
      // 展开收起
      this.menuData[index].__Panel = !this.menuData[index].__Panel;
      this.$forceUpdate();
    },

    // 点击某项
    clickItem({ index, childIndex }) {
      this.menuData[index].children.forEach((child, cIndex) => {
        child.__Active = childIndex === cIndex;
      });
      this.$forceUpdate();
      this.$emit("click", { index, childIndex });
    }
  },
  created() {
    this.menuData = this.formatData(this.data);
  }
};
</script>

<style scoped lang="scss">
@import "@/assets/common/css/__color.scss";
@import "@/assets/common/css/__flex.scss";

.menu {
  width: 240px;
  transition: width 0.3ms;
  color: $tipColor;
}

.menu--collapsed {
  width: 70px;
}

.menu--collapsed .menu-shrink__icon {
  transform: rotate(180deg);
}

.menu--collapsed .menu-title__text,
.menu--collapsed .menu-title__icon--right,
.menu--collapsed .menu-item {
  display: none;
}

.menu-shrink {
  padding: 14px 24px 0;
  text-align: right;
  &__icon {
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    &:hover {
      color: $majorColor;
    }
  }
}

.menu-title {
  @include flex-box();
  @include flex-box--y(center);
  line-height: 48px;
  padding: 0 24px;
  &:hover {
    color: $majorColor;
  }
  &__text {
    @include flex-item();
    height: 48px;
    font-size: 16px;
    cursor: pointer;
    overflow: hidden;
  }
  &__icon {
    &--left {
      font-size: 18px;
      margin: 0 2px;
    }
    &--right {
      display: inline-block;
      font-size: 16px;
      margin: 0 3px;
      transform: rotate(-90deg);
      transition: transform 0.3s;
    }
  }
  &__icon--left ~ &__text {
    margin-left: 10px;
  }
  &__icon--right ~ &__text {
    margin-right: 10px;
  }
  &--open {
    color: $majorColor;
    .menu-title__icon--right {
      transform: rotate(0);
    }
  }
}

.menu-item {
  line-height: 42px;
  height: 42px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0 24px;
  &.active {
    position: relative;
    background: $bgColor;
    color: $majorColor;
    &::after {
      content: "";
      position: absolute;
      height: 100%;
      width: 2px;
      background: $majorColor;
      top: 0;
      right: 0;
    }
  }
}
</style>